<template>
	<view class="login">
		<view class="login-form">
			<view class="logintitle" align="center">
				<u-image width="120px" height="120px" src="/static/logo.png"></u-image>
				<span class="band-text">MES系统智能终端</span>
			</view>
			<u-tabs barWidth="180" fontSize="30" :list="list" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
			<u-form ref="loginForm" :modelValue="loginForm" :rules="loginRules" v-if="current == 0">
				<u-form-item prop="username">
					<u-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名">
						<u-icon name="man"></u-icon>
					</u-input>
				</u-form-item>
				<u-form-item prop="password">
					<u-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码"
						@keyup.enter="submit">
						<u-icon name="man"></u-icon>
					</u-input>
				</u-form-item>
				<u-form-item prop="code">
					<view class="flex-container">
						<u-input v-model="loginForm.code" type="code" auto-complete="off" placeholder="请输入验证码"
							@keyup.enter="submit">
							<u-icon name="man"></u-icon>
						</u-input>
						<u-image width="120px" height="30px" v-if="codeUrl!=''" :src="codeUrl" @tap="getCode"></u-image>
					</view>
				</u-form-item>

				<u-form-item style="width:100%;">
					<u-button :loading="loading" size="medium" type="primary" style="width:100%;" @click="submit()">
						<span v-if="!loading">登 录</span>
						<span v-else>登 录 中...</span>
					</u-button>
				</u-form-item>
			</u-form>
			<image src="/static/images/card.jpeg" v-else></image>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '账号登录'
					},
					// {
					// 	name: '刷卡登录'
					// },
				],
				current: 0,
				codeUrl: '',
				loading: false,
				loginForm: {
					username: "admin",
					password: "admin123",
					code: '',
					uuid: ""
				},
				loginRules: {
					username: {
						rules: [{
							required: true,
							trigger: "blur",
							errorMessage: "请输入您的账号"
						}],
					},

					password: {
						rules: [{ 
							required: true,
							trigger: "blur",
							errorMessage: "请输入您的密码"
						}]
					}
				},
			}
		},
		created() {
			this.getCode()
		},
		methods: {
			// 下拉刷新
			onPullDownRefresh() {
				console.log('用户发生了下拉刷新')
				const {
					logout
				} = this.$u.api;
				const that = this;
				logout().then(res => {
					if (res.code == 200) {
						that.$u.vuex('vuex_token', '');
						this.getCode()
					}
				})
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1500)
			},
			change(index) {
				this.current = index;
			},
			//获取验证码
			getCode() {
				this.codeUrl = '';
				this.$u.api.validCode().then(res => {
					if(JSON.parse(res).code==200){
						
					
					this.codeUrl = "data:image/gif;base64," + JSON.parse(res).img;
					this.loginForm.uuid = JSON.parse(res).uuid;
					uni.showToast({
						title: '操作成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
					}else{
						uni.showToast({
							title: '连接服务器失败',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			submit() {
				this.$refs.loginForm.validate().then(valid => {
					if (valid) {
						this.loading = true;
						this.$u.api.login({
								...this.loginForm
							})
							.then(res => {
								this.loading = false;
								if (res.msg) {
									this.$u.toast(res.msg);
								}
								if (res.code == '200') {
									// 获取个人信息
									this.$u.api.getUserProfile().then(res => {
										this.$u.vuex('vuex_user', res.data);
										// console.log('store',this.$store.state);
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages/index/index'
											});
										}, 500);
									})
								} else {
									this.loginForm = {
										username: "admin",
										password: "admin123",
										code: '',
										uuid: ""
									};
									this.getCode()
								}
							});
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-image: url("@/static/images/bg.png");
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.logintitle {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
	}

	.login-form {
		border-radius: 6px;
		background: #ffffff;
		width: 300px;
		padding: 50px;

		.input-icon {
			height: 39px;
			width: 14px;
			margin-left: 2px;
		}

		.flex-container {
			width: 100%;
			display: flex;
			align-items: center;
		}
	}
</style>